<template>
  <div>
    <ep-advance-card title="筛选表格" theme="theme-1">
      <ep-form class="p-t-15" :rules="searchFormRules" :form="searchForm" ref="searchForm" name-width="100px" name-position="right">
        <ep-row :gutter="10">
          <ep-col :col="6">
            <ep-form-item label="姓名" attr="name">
              <ep-input v-model="searchForm.name"></ep-input>
            </ep-form-item>
          </ep-col>
          <ep-col :col="6">
            <ep-form-item label="ID">
              <ep-input v-model="searchForm.id"></ep-input>
            </ep-form-item>
          </ep-col>
          <ep-col :col="6">
            <ep-form-item label="地址">
              <ep-input v-model="searchForm.name"></ep-input>
            </ep-form-item>
          </ep-col>
          <template v-if="moreFilter">
            <ep-col :col="6">
              <ep-form-item label="姓名">
                <ep-input v-model="searchForm.name"></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="6">
              <ep-form-item label="姓名">
                <ep-input v-model="searchForm.name"></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="6">
              <ep-form-item label="姓名">
                <ep-input v-model="searchForm.name"></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="6">
              <ep-form-item label="姓名">
                <ep-input v-model="searchForm.name"></ep-input>
              </ep-form-item>
            </ep-col>
          </template>
          <ep-col class="filter-btn-fixed-r" :col="6">
            <ep-form-item>
              <ep-button type="primary" class="m-r-10" @click="refresh(true)">查询</ep-button>
              <span style="cursor: ponter" @click="handleOpenFilter">
                {{ moreFilter ? '收起' : '展开' }}
                <i :class="moreFilter ? 'ion-chevron-up' : 'ion-chevron-down'"></i>
              </span>
            </ep-form-item>
          </ep-col>
        </ep-row>
      </ep-form>
    </ep-advance-card>
    <ep-advance-card title="查询结果" theme="theme-1" class="m-t-20" :cardContStyle="{ padding: '0' }">
      <ep-table :data="epData" can-edit :header-cell-style="{ background: '#fafafa', fontWeight: 'normal' }">
        <ep-table-item column="id" title="ID"></ep-table-item>
        <ep-table-item column="name" title="姓名"></ep-table-item>
        <ep-table-item column="addr" title="地址"></ep-table-item>
        <ep-table-item column="action" title="操作">
          <template slot-scope="props">
            <ep-button class="m-r-10" size="mini" type="success">编辑</ep-button>
            <ep-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="ion-information-circled"
              icon-color="red"
              placement="top"
              title="这是一段内容确定删除吗？"
              @confirm="handleClose(props.index)"
            >
              <ep-button size="mini" type="danger" slot="reference">删除</ep-button>
            </ep-popconfirm>
          </template>
        </ep-table-item>
      </ep-table>
      <ep-pager
        class="m-t-10 m-b-10"
        right
        :now-page="epPager.offset"
        :page-size="epPager.limit"
        :total-num="epDataTotal"
        @change="handlePageChange"
        @size-change="sizeChange"
      ></ep-pager>
    </ep-advance-card>
  </div>
</template>

<script>
import searchMixin from '@/common/mixins/searchMixin'
import { getTableData } from '../api'

export default {
  mixins: [searchMixin],
  data() {
    return {
      api: getTableData,
      searchForm: {
        name: 'search',
        id: '',
        addr: ''
      },
      moreFilter: false
    }
  },
  computed: {
    searchFormRules() {
      return {
        name: { required: true, message: '请输入', trigger: 'blur' }
      }
    }
  },

  methods: {
    handleOpenFilter() {
      this.moreFilter = !this.moreFilter
    }
  }
}
</script>

<style></style>
